<template>
    <div class="shg">
        <div style="position:fixed;top:0;z-index: 20;width: 100%;">
            <div style="display: flex;justify-content:space-between;background-color: #fff;padding: .3rem .4rem;">
                <!--返回按钮-->
                <el-button type="text" icon="el-icon-arrow-left" @click="prv"/>
                <!--搜索框-->
                <router-link to="/homeSearch" style="width:80%;">
                    <el-input
                            placeholder="请输入关键字"
                            prefix-icon="el-icon-search"
                            v-model="value" style="width:100%;text-align: center" @click="searchM">
                    </el-input>
                </router-link>
                <!--更多-->
                <el-button type="text" icon="el-icon-more" @click="drawer = true" style="color: #333333;"/>
                <el-drawer
                        size="25%"
                        title="功能直达"
                        :visible.sync="drawer"
                        :direction="direction"
                        :modal="false"
                >
                    <ul style="list-style: none;display:flex;justify-content: space-between">
                        <li class="lis" @click="goMsg"><i class="ico"
                                                          style="font-size: 20px;color: #ffffff;">&#xe634;</i>
                            <p class="fz">消息</p></li>
                        <li class="lis" @click="goHome"><i class="ico"
                                                           style="font-size: 20px;color: #ffffff;">&#xe626;</i>
                            <p class="fz">首页</p></li>
                        <li class="lis" @click="goCart"><i class="ico"
                                                           style="font-size: 20px;color: #ffffff;">&#xe65d;</i>
                            <p class="fz">购物车</p></li>
                        <li class="lis" style="margin: 0;" @click="goMin"><i class="ico"
                                                                             style="font-size: 20px;color: #ffffff;">&#xe61b;</i>
                            <p class="fz">我的</p></li>
                    </ul>
                </el-drawer>
            </div>
            <!--筛选框-->
            <div id="panel" style="margin-bottom:17px ">
                <van-dropdown-menu style="display: flex;font-size: 14px;">
                    <!--综合等-->
                    <van-dropdown-item :title="name">
                        <ul style="list-style: none">
                            <li style="display: flex;justify-content: space-between;border-top:0.5px solid #f4f4f4;"
                                v-for="(v,i) in type" @click="names($event,i)">
                                <van-cell center :title="v"></van-cell>
                                <i class="el-icon-check"
                                   style="font-weight: bolder;color:#fa3534;margin-right: 20px;line-height: 42px;"
                                   v-if="i==c"></i>
                            </li>
                        </ul>
                    </van-dropdown-item>
                    <!--筛选销量-->
                    <div style="width: 25%;background-color: #ffffff;text-align: center;line-height: 48px;"
                         :class="{col:vss==v}" @click="vs(v)" v-for="v in nam">{{v}}
                    </div>
                    <!--商品样式转换-->
                    <div style="width: 25%;background-color: #ffffff;text-align: center;line-height: 48px;"
                         @click="chg">
                        <i class="ico" v-if="show" style="font-size:17px;">&#xe86a;</i>
                        <i class="ico" v-else style="font-size:19px;">&#xe681;</i>
                    </div>
                </van-dropdown-menu>
            </div>
        </div>
        <!--商品栏-->
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                class="top" style="margin-top: 128px" v-if="shows">
            <!--综合搜索-->
            <van-cell v-for="(v,i) in lists" :key="i" :class="{bigs:!change}">
                <div :class="{list:change2}">
                    <!--图片-->
                    <div :class="{lists:change2}">
                        <img :src="v.small" alt="" style="width: 100%;">
                    </div>
                    <!--信息-->
                    <div :class="{lists2:!change2,bigs2:!change}">
                        <!--是否自营与信息-->
                        <p style="font-weight: 500;
    vertical-align: middle;
    font-size: 15px;overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;-webkit-line-clamp: 2"><span v-if="v.self_operated == 1" style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin-right: 5px;">自营</span><span>{{v.name}}</span>
                        </p>
                        <!--价格-->
                        <p style="margin: 27px 0 5px 0;"><span style="color: rgb(250, 53, 52);
    font-size: 10px;
    font-weight: 600;">￥</span><span style="color: rgb(250, 53, 52);
    font-size: 16px;
    font-weight: 600;">{{v.price}}</span></p>
                        <!--购买记录与评价-->
                        <p style="font-size: 12px;
    color: #82848a;"><span>{{v.buy_count}}人已购买</span><span>{{v.comment_num}}条评论</span></p>
                        <!--经营信息-->
                        <p style="font-size: 12px;
    color: #82848a;">{{v.seller_name}}</p>
                    </div>
                </div>
            </van-cell>
            <!--返回顶部锚点-->
            <p v-if="local" @click="jump" class="btn_run" style="width: 36px;
    border-radius: 50%;
    height: 36px;background-color: rgba(0,0,0,.1);position: fixed;right:5%;bottom:10%;text-align: center;line-height: 42px">
                <van-icon name="back-top"/>
            </p>
        </van-list>
        <!--销量-->
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad2"
                class="top" style="margin-top: 128px" v-if="shows2">
            <!--综合搜索-->
            <van-cell v-for="v in lists2" :key="v.goods_id" :class="{bigs:!change}">
                <div :class="{list:change2}">
                    <!--图片-->
                    <div :class="{lists:change2}">
                        <img :src="v.small" alt="" style="width: 100%;">
                    </div>
                    <!--信息-->
                    <div :class="{lists2:!change2,bigs2:!change}">
                        <!--是否自营与信息-->
                        <p style="font-weight: 500;
    vertical-align: middle;
    font-size: 15px;overflow: hidden;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;-webkit-line-clamp: 2"><span v-if="v.self_operated == 1" style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin-right: 5px;">自营</span><span>{{v.name}}</span>
                        </p>
                        <!--价格-->
                        <p style="margin: 27px 0 5px 0;"><span style="color: rgb(250, 53, 52);
    font-size: 10px;
    font-weight: 600;">￥</span><span style="color: rgb(250, 53, 52);
    font-size: 16px;
    font-weight: 600;">{{v.price}}</span></p>
                        <!--购买记录与评价-->
                        <p style="font-size: 12px;
    color: #82848a;"><span>{{v.buy_count}}人已购买</span><span>{{v.comment_num}}条评论</span></p>
                        <!--经营信息-->
                        <p style="font-size: 12px;
    color: #82848a;">{{v.seller_name}}</p>
                    </div>
                </div>
            </van-cell>
            <!--返回顶部锚点-->
            <p v-if="local" @click="jump" class="btn_run" style="width: 36px;
    border-radius: 50%;
    height: 36px;background-color: rgba(0,0,0,.1);position: fixed;right:5%;bottom:10%;text-align: center;line-height: 42px">
                <van-icon name="back-top"/>
            </p>
        </van-list>
        <!--店铺-->
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad3"
                class="top" style="margin-top: 128px;" v-else>
            <!--店铺搜索-->
            <van-cell v-for="v in lists3" :key="v.shop_id"
                      style="width:96%;margin: 5px auto;border-radius: 4px;margin-bottom: 10px;padding:10px 8px ;">
                <div style="background-color: #fff;">
                    <div style="display: flex;justify-content: space-between">
                        <div style="display: flex;width: 65%;"><p><img :src="v.shop_logo" alt=""
                                                                       style="width:100px;height: 30px;"></p>
                            <p style="margin-left:15px;"><span>{{v.shop_name}}</span><span style="border-radius: 4px;
    color: #fff;
    font-size: 10px;
    width: 30px;
    text-align: center;
    padding: 2px 4px;
    background: linear-gradient(90deg,#fd5632 0,#ef0d25);margin: 0 5px;" v-if="v.shop_name == '平台自营'">自营</span></p>
                        </div>
                        <button style="color: #fff;
    border-color: #f90;
    background-color: #f90;width: auto;
    font-size: 11px;
    padding-top: 1px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;border-radius: 50px;border: none;" @click="goShops(v)">进店逛逛
                        </button>
                    </div>
                    <ul style="list-style:none;display:flex;justify-content: space-between;margin-top: 8px">
                        <li v-for="(x,i) in v.goods_list" :key="i+0.2" v-if="i<3" style="border-radius: 4px;
    overflow: hidden;"><img :src="x.small" alt="" style="width:100px;vertical-align: top;"></li>
                    </ul>
                </div>
            </van-cell>
            <!--返回顶部锚点-->
            <p v-if="local" @click="jump" class="btn_run" style="width: 36px;
    border-radius: 50%;
    height: 36px;background-color: rgba(0,0,0,.1);position: fixed;right:5%;bottom:10%;text-align: center;line-height: 42px">
                <van-icon name="back-top"/>
            </p>
        </van-list>
    </div>
</template>

<script>
    import Vue from 'vue'
    import jsp from '../../Api/Api'
    import {Dialog} from 'vant';

    Vue.use(Dialog);

    export default {
        name: "SearchGoods",
        data() {
            return {
                //页数
                numm: 1,
                numm2: 1,
                numm3: 1,
                //商品数
                lists: [],
                lists2: [],
                lists3: [],
                loading: false,
                finished: false,
                drawer: false,
                direction: 'ttb',
                value: '',
                show: true,
                shows: true,
                shows2: false,
                name: '综合',
                a: false,
                vss: '',
                nam: ['销量', '店铺'],
                type: ['综合', '价格最低', '价格最高', '评论最少', '评论最多'],
                c: 0,
                change: true,
                change2: true,
                local: false,
            }
        },
        created() {
            let a = this.$route.query.keyword
            this.value = a
        },
        methods: {
            //综合数据请求
            onLoad(v) {
                let a = this.$route.query.keyword
                switch (v) {
                    case 'shop_desc': {
                        //热门搜索信息
                        jsp.searchMethod(a, this.numm, v).then(data => {
                            // console.log(data.data.data)
                            this.lists.push(...data.data.data)
                            this.numm++
                            // 加载状态结束
                            this.loading = false;
                            if (this.lists.length >= data.data.data_total) {
                                this.finished = true;
                            }
                        }).catch(error => console.log(error))
                        break
                    }
                    case 'price_asc': {
                        //热门搜索信息
                        jsp.searchPrice(a, this.numm, v).then(data => {
                            // console.log(data.data.data)
                            this.lists.push(...data.data.data)
                            this.numm++
                            // 加载状态结束
                            this.loading = false;
                            if (this.lists.length >= data.data.data_total) {
                                this.finished = true;
                            }
                        }).catch(error => console.log(error))
                        break
                    }
                    case 'price_desc': {
                        //热门搜索信息
                        jsp.searchPrice(a, this.numm, v).then(data => {
                            // console.log(data.data.data)
                            this.lists.push(...data.data.data)
                            this.numm++
                            // 加载状态结束
                            this.loading = false;
                            if (this.lists.length >= data.data.data_total) {
                                this.finished = true;
                            }
                        }).catch(error => console.log(error))
                        break
                    }
                    case 'grade_asc': {
                        //热门搜索信息
                        jsp.searchPrice(a, this.numm, v).then(data => {
                            // console.log(data.data.data)
                            this.lists.push(...data.data.data)
                            this.numm++
                            // 加载状态结束
                            this.loading = false;
                            if (this.lists.length >= data.data.data_total) {
                                this.finished = true;
                            }
                        }).catch(error => console.log(error))
                        break
                    }
                    case 'grade_desc': {
                        //热门搜索信息
                        jsp.searchPrice(a, this.numm, v).then(data => {
                            // console.log(data.data.data)
                            this.lists.push(...data.data.data)
                            this.numm++
                            // 加载状态结束
                            this.loading = false;
                            if (this.lists.length >= data.data.data_total) {
                                this.finished = true;
                            }
                        }).catch(error => console.log(error))
                        break
                    }
                    default : {
                        jsp.searchMethod(a, this.numm, 'shop_desc').then(data => {
                            // console.log(data.data.data)
                            this.lists.push(...data.data.data)
                            this.numm++
                            // 加载状态结束
                            this.loading = false;
                            if (this.lists.length >= data.data.data_total) {
                                this.finished = true;
                            }
                        }).catch(error => console.log(error))
                        break
                    }
                }
            },
            //销量数据请求
            onLoad2(v) {
                // this.numm2 = v
                let a = this.$route.query.keyword
                jsp.searchSale(a, this.numm2).then(data => {
                    this.lists2.push(...data.data.data)
                    this.numm2++
                    // 加载状态结束
                    this.loading = false;
                    if (this.lists2.length >= data.data.data_total) {
                        this.finished = true;
                    }
                }).catch(error => console.log(error))
            },
            //店铺数据请求
            onLoad3(v) {
                // this.numm3 = v
                let a = this.$route.query.keyword
                jsp.searchShop(a, this.numm3).then(data => {
                    // console.log(data.data)
                    // this.lists3=[]
                    this.lists3.push(...data.data.data)
                    this.numm3++
                    // 加载状态结束
                    this.loading = false;
                    if (this.lists3.length >= data.data.data_total) {
                        this.finished = true;
                    }
                }).catch(error => console.log(error))
            },
            prv() {
                this.$router.go(-1)
            },
            // 取消回首页
            searchM() {
                this.$router.push('/homeSearch')
            },
            //综合列表
            names(e, i) {
                console.log(i)
                this.name = e.path[0].innerText
                // 模拟主元素点击事件，实现选择后下拉菜单收起
                const x = document.createEvent('MouseEvents');
                x.initEvent('click', true, true);
                document.getElementById('panel').dispatchEvent(x)
                this.c = i
                switch (i) {
                    case 0: {
                        // console.log(11111111)
                        // this.lists = []
                        // this.onLoad('shop_desc')
                        // this.lists2 = []
                        // this.shows = true
                        // break
                    }
                    case 1: {
                        console.log(22222)
                        this.lists = []
                        this.onLoad('price_asc')
                        this.lists2 = []
                        this.shows = true
                        break
                    }
                    case 2: {
                        console.log(2333333)
                        this.lists = []
                        this.onLoad('price_desc')
                        this.lists2 = []
                        this.shows = true
                        break
                    }
                    case 3: {
                        console.log(444444)
                        this.lists = []
                        this.onLoad('grade_asc')
                        this.lists2 = []
                        this.shows = true
                        break
                    }
                    case 4: {
                        console.log(555555)
                        this.lists = []
                        this.onLoad('grade_desc')
                        this.lists2 = []
                        this.shows = true
                        break
                    }
                }
            },
            //销量商铺按钮
            vs(v) {
                // console.log(this.shows2, this.shows)
                this.vss = v
                if (v == '销量') {
                    if (this.shows2 == false) {
                        this.shows2 = !this.shows2
                        if (this.shows == false) {
                            this.shows2 = !this.shows2
                        } else {
                            this.shows = !this.shows
                        }
                    } else if (this.shows2 == true && this.shows == false) {
                        this.shows = !this.shows
                        this.shows2 = !this.shows2
                    }
                    this.onLoad2(1)
                } else {
                    this.shows2 = false
                    this.shows = false
                    this.onLoad3(1)
                }
            },
            //前往信息页
            goMsg() {
                Dialog.confirm({
                    title: '提示',
                    message: '您还未登录，请先登录~',
                    cancelButtonText:'再逛逛',
                    confirmButtonText:'去登录',
                }).then(() => {
                    this.$router.push('/enter')
                }).catch(() => {

                });
            },
            //前往首页
            goHome() {
                this.$router.push('/home')
            },
            //前往购物车
            goCart() {
                this.$router.push('/cart')
            },
            //前往我的
            goMin() {
                this.$router.push('/mine')
            },
            //前往店铺首页
            goShops(v){
                // console.log(v)
                //shop_id店铺id
                this.$router.push({path:'/shop',query:{shop_id:v.shop_id}})
            },
            //锚点
            jump() {
                let jump = document.querySelectorAll('.top')
                // 获取需要滚动的距离
                let total = jump.offsetTop
                // Chrome
                document.body.scrollTop = total
                // Firefox
                document.documentElement.scrollTop = total
                this.scrollTop()
            },
            //锚点滚动
            scrollTop() {
                let distance = document.documentElement.scrollTop || document.body.scrollTop;
                let step = distance / 50;
                let total = 0;
                if (total < distance) {
                    let newTotal = distance - total;
                    step = newTotal / 50;
                    smoothUp();
                }

                function smoothUp() {
                    if (distance > 1) {
                        distance -= step;
                        document.body.scrollTop = distance;
                        document.documentElement.scrollTop = distance;
                        setTimeout(smoothUp, 10);
                    } else {
                        document.body.scrollTop = 1;
                        document.documentElement.scrollTop = 1;
                    }
                }
            },
            //样式改变图标
            chg() {
                this.show = !this.show
                this.change = !this.change
                this.change2 = !this.change2
            },
            //监听滚动
            btn_pos() {
                //滚动条的高度
                var scrollTop = document.documentElement.scrollTop;
                // console.log(scrollTop)
                // var clientHeight = document.documentElement.clientHeight;

                //滚动条的高度>可视区的高度
                if (scrollTop > 1200) {
                    this.local = !this.local
                } else {
                    this.local = !this.local
                }
            },
            searchM() {
                // console.log(13213)
                this.$router.push('/homeSearch')
            }
        },
        mounted() {
            window.addEventListener('scroll', this.btn_pos, true);
        },
        destroyed() { //离开这个界面之后，删除，不然会有问题
            window.removeEventListener('scroll', this.btn_pos)
        }
    }

</script>

<style scoped>
    >>> .el-icon-arrow-left {
        color: rgb(96, 98, 102) !important;
        font-size: 20px !important;
        font-weight: bolder !important;
    }

    >>> .el-input__inner {
        border-radius: 20px;
    }

    >>> .van-dropdown-menu__bar {
        width: 25%;
        line-height: 40px;
        box-shadow: none;
        height: 100%;
    }

    .van-icon {
        color: #fff;
    }

    >>> .van-dropdown-menu__title {
        line-height: 50px;
    }

    >>> .van-ellipsis {
        font-size: 14px;
    }

    >>> .van-cell {
        line-height: 18px;
    }

    >>> .el-drawer {
        background-color: rgb(88, 85, 87);
        border-radius: 0px 0px 10px 10px;
        overflow: hidden;
    }

    >>> .el-drawer__header {
        color: #ffffff;
        font-size: 15px;
    }

    >>> .el-drawer__body {
        padding: 0 15px;
        margin-bottom: 10px;
    }

    .col {
        color: red;
    }

    .fz {
        color: rgb(255, 255, 255);
        font-size: 12px;
        margin-top: 10px;
    }

    li >>> .van-cell::after {
        border-bottom: none;
    }

    .lis {
        width: 25%;
        padding: 15px;
        border-radius: 7px;
        text-align: center;
        background-color: #3e3e3e;
        margin-right: 14px;
    }

    .list {
        display: flex;
    }

    .lists img {
        width: 120px !important;
        height: 120px;
    }

    .lists2 {
        margin-left: 10px;
        padding-bottom: 5px;
    }

    .bigs {
        display: inline-block;
        width: 47%;
        background: #fff;
        overflow: hidden;
        margin: 5px 0;
        border-radius: 10px;
        margin-left: 2%;
    }

    .bigs img {
        width: 150px !important;
        height: 150px;
    }

    @font-face {
        font-family: 'iconfont';  /* Project id 2384427 */
        src: url('//at.alicdn.com/t/font_2384427_fu2unve48yo.woff2?t=1623327227180') format('woff2'),
        url('//at.alicdn.com/t/font_2384427_fu2unve48yo.woff?t=1623327227180') format('woff'),
        url('//at.alicdn.com/t/font_2384427_fu2unve48yo.ttf?t=1623327227180') format('truetype');
    }

    .ico {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
    }
</style>